<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.2.1.1.js"></script>
		<script src="js/ajax.js"></script>
		
		<style>
		
			.green{
				background-color: rgb(89, 254, 201);
			}
		
			.mywith{
				width: 800px;
				text-align: center;
				
				margin: 20px auto;
				/* border:  1px solid red; */
			}
			
			#myheader{
				font-size: 25px;
			}
			
			.mytable{
				width: 800px;
				
			}
			.mytable th{
				border: 1px solid black;
			}
			
			.mytable td{
				border: 1px solid black;
			}
			
			#abc{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		
		<div class="mywith">
			<table class="mytable" cellpadding="0" cellspacing="0">
				
				<tr>
					<td colspan="6">
						学员信息列表
					</td>
				</tr>
				
				<tr class="green">
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>住址</th>
					<th>Email</th>
				</tr>
				<tbody id="scott">
					<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
					
				</tbody>
			</table>
		</div>
		
		<script>
		
			function toUpate(sid){
				
				window.location.href=getRoot()+"student-update.jsp?sid="+sid;
			}
		
			//当页面加载完毕后 应该要显示所有的数据
			$(function(){
				//3 发送ajax请求到后台
				// 2.1、准备发送ajax请求的数据
				var url=getRoot()+"find/all";
				var method='GET';
				var callback=function(backData){
					var code = backData.code;
					if(code === '200'){
						$('#scott').text('');
						
						var array = backData.data;
						
						
						
						for(var index=0;index<array.length;index++){
							var entity = array[index];
							
							
							var tr;
							
							if(entity.sid%2==0){
								tr='<tr class="green"><td><a href="javascript:void(0)" onclick="toUpate('+entity.sid+')">'+entity.sid+'</a></td><td>'+entity.sname+'</td><td>'+entity.sgender+'</td><td>'+entity.sage+'</td><td>'+entity.saddress+'</td><td>'+entity.semail+'</td></tr>';
							}else{
								tr='<tr><td> <a href="javascript:void(0)" onclick="toUpate('+entity.sid+')">'+entity.sid+'</a></td><td>'+entity.sname+'</td><td>'+entity.sgender+'</td><td>'+entity.sage+'</td><td>'+entity.saddress+'</td><td>'+entity.semail+'</td></tr>';
							}
							
							// 把tr拼出来
							// tr 是1个字符串
							// 怎么把1个字符串转化为json对象? 
							// 语法： 只需要把这个对象用 $()包起来  元素
							
							//2 append 在某个对象的内部增加1个元素
							
							$('#scott').append($(tr));
							
						}
						
						// TODO  更新成功
						// 如果是从更新页面过来 在要显示更新成功
						// 判断的方法：解析url 然后看有没有upatesuccess
						var currentUrl=window.location.href;
						var ass= currentUrl.split("=");
						var flag = ass[1];
						if( flag == 'upatesuccess'){
							$('#scott').append($('<tr><td colspan="6"><span style="color: red; font-size: 35px;">更新成功</span></td></tr>'));
						}
						
						
						
					}
				}
				
				// 2.2、这里才是真的发送ajax请求
				send(url,method,'',callback);
				
			});
			
		
		</script>
	</body>
</html>
